<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>新增</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/index.css">
<script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/layui-post.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form action="" method="post" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class='x-red'>* </span>所属商品</label>
                <div class="layui-input-block">
                    <select name="goodsId" id="goodsId" lay-verify="required"><option value="">请选择所属商品</option></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="spacesName" class="layui-form-label"><span class="x-red">* </span>规格名称</label>
                <div class="layui-input-block">
                    <input type="text" id="spacesName" name="spacesName" required="" lay-verify="required" placeholder="请输入规格名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="sort" class="layui-form-label"><span class="x-red">* </span>规格排序</label>
                <div class="layui-input-block">
                    <input type="number" id="sort" name="sort" required="" lay-verify="required" placeholder="请输入规格排序" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="add" style="float:right;">确定</button>
            </div>
        </form>
        <div class="layui-form-item" style="margin:0px;">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="addRow" style="position:absolute;margin-top:-45px;"><i class="layui-icon"></i>新增</button>
        </div>
        <div class="layui-table-body layui-table-main">
            <table class="layui-table layui-form" id="table" lay-filter="editableTable"></table>
        </div>
    </div>
</div>
<script>
layui.use(['form','table','laydate'], function(){
   	var form = layui.form,table = layui.table;
    $.post(geturl()+'/cateringGoods/select?token='+sessionStorage.getItem("token"), JSON.stringify({status:"0"}), function (res) {
        for(var i in res.data) $('#goodsId').append('<option value="'+ res.data[i].sysId + '">' + res.data[i].goodsName + '</option>');
        layui.form.render();
    })
    table.render({
        elem:'table', //指定元素
        page:false,
        edit:true, // 开启编辑功能
        cols:[[
            {align:'center',title:'操作',templet:onloadTool,width:100},
            {title:'序号',align:"center",halign:"center",width:80,type:'numbers'},
            {field:'spacesName',align:"center",edit: true,title:'规格属性'},
            {field:'price',align:"center",edit: true,title:'规格价格'},
        ]],
        data: [],
    });
    form.on('submit(addRow)', function(data){
        var newRow = {
            spacesName: data.field.spacesName,
            price: data.field.price
        };
        table.cache.table.push(newRow); // 将新行添加到表格缓存中
        table.reload('table', {
            data: table.cache.table
        }); // 重载表格
        return false; // 阻止表单提交
    });
   	//监听提交
   	form.on('submit(add)', function(data){
        var isSub = true;
        if(table.cache.table.length === 0){
            layer.msg("规格属性列为空！",{icon:5,time:1000});
            isSub = false;
        }else{
            for(var i in table.cache.table){
                if(isEmpty(table.cache.table[i].spacesName) || isEmpty(table.cache.table[i].price)){
                   layer.msg("规格属性列为空！",{icon:5,time:1000});
                   isSub = false;
                   break;
                }else if(!isNumeric(table.cache.table[i].price)){
                   layer.msg("价格为非数字符！",{icon:5,time:1000});
                   isSub = false;
                   break;
                }
            }
        }
        data.field.childList = table.cache.table
        if(isSub){
           layuiPost(geturl()+'/parentSpaces/insert?token='+sessionStorage.getItem("token"),data.field,parent.layer.getFrameIndex(window.name));
       }
        return false;
   	});
});
function onloadTool(data) {
    return '<a title="删除" onclick="delData(this,\'' + data.LAY_TABLE_INDEX + '\')" href="javascript:;"><i class="layui-icon">&#xe640;</i></a>';
}
function delData(obj,index){
    layui.table.cache.table.splice(index,1)
    layui.table.reload('table', {
        data: layui.table.cache.table
    });
}
function isNumeric(value) {
    return /^\d+(\.\d{1,2})?$/.test(value);
}
</script>
</body>
</html>